<template>
	<div style='background:#fff;padding:50px;'>
		<p style='font-size:16px;color:#464C5B;font-weight: 700;margin-bottom: 30px;'>基本信息</p>
		<Form :label-width='80'>
    		<FormItem label='账号'>
                <p slot='label'><span class='star'>*</span>账号</p>
    			<Input v-model='formItem.phone' placeholder='请输入账号' style='width:354px' readonly></Input>
    		</FormItem>
    		<FormItem label='昵称'>
                <p slot='label'><span class='star'>*</span>昵称</p>
    			<Input v-model='formItem.nickname' placeholder='请输入昵称' style='width:354px'></Input>
    		</FormItem>
    		<FormItem label='QQ'>
    			<Input v-model='formItem.qq_num' placeholder='请输入QQ' :maxlength="12" style='width:354px'></Input>
    		</FormItem>
    		<FormItem label='头像'>
                <p slot='label'><span class='star'>*</span>头像</p>
                <Upload
                    multiple
                    type="drag"
                    :action="getUrl('/home/image/upload')"
                    id='upload-file'
                    :on-success="handleAddSuccess"
                    :format="['jpg','jpeg','png']"
                    :max-size="1024"
                    :show-upload-list="false"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    :headers="uploadHeaders()"
                    style='width: 80px;height: 80px'
                    >
                    <div class='upload-file-wrap' v-if='!avater_id'>
                        <Icon type="ios-cloud-upload" color='#06A0FD' size='30' style='margin-top:15px'></Icon>
                        <div>点击上传头像</div>
                    </div>
                    <div class='upload-file-wrap' v-else>
                        <img v-lazy="formItem.imgUrl" style='width:100%;height:100%'>
                    </div>
                </Upload>
				<div style='font-size:10px;color:#BABFCD'>仅支持jpg、png格式，文件小于1M</div>
    		</FormItem>
    		<!-- <FormItem label='签名'>
    			<Input v-model='formItem.sign' placeholder='请输入签名' style='width:354px'></Input>
    		</FormItem> -->
    		<FormItem>
    			<div class='btn btn-hover' @click='saveInfo' style='margin-top:16px'>保存</div>
    		</FormItem>
    	</Form>
	</div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return{
                formItem:{
                    phone:'',
                    nickname:'',
                    qq_num:'',
                    imgUrl:'',
                    sign:''
                },
                avater_id:0,
                id:0
			}
		},
		created(){
            this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
            this.getInfo();
		},
        methods:{
            getInfo(){
                this.fetch('/home/user').then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        let data = res.data.data;
                        this.formItem = data.user_info;
                        this.formItem.phone = data.phone;
                        this.avater_id = data.user_info.avater_id;
                        if(data.user_info.avater_id){
                            this.formItem.imgUrl = data.user_info.avater.url;
                        }
                        this.formItem.qq_num = this.formItem.qq_num || '';
                        if(data.user_info.id){
                            this.id = data.user_info.id;
                        }
                        
                    }
                })
            },
            handleAddSuccess(res){
                if(res.code){
                    this.formItem.imgUrl = res.data.url;
                    this.avater_id = res.data.avater_id;
                }
            },
            saveInfo(){
                if(!this.formItem.nickname){
                    this.$Message.warning('请输入昵称')
                    return;
                }
                if(!Number(this.formItem.qq_num) && this.formItem.qq_num){
                    this.$Message.warning('QQ号格式不正确')
                    return;
                }
                if(!this.avater_id){
                    this.$Message.warning('请上传头像')
                    return;
                }
                let data = {
                    nickname:this.formItem.nickname,
                    qq_num:this.formItem.qq_num,
                    avater_id:this.avater_id,
                    sign:this.formItem.sign || ''
                }
                if(this.id){
                    data.id = this.id;
                }
                this.fetch('/home/user',data).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.$Message.success('保存成功')
                        this.getInfo();
                        this.$bus.emit('setNickname',true)
                    }
                })
            }
        }
	}
</script>
<style scoped>
   .upload-file-wrap{
        width:80px;
        height:80px;
        background:rgba(16,141,233,0.1);
        border-radius: 50px;
        overflow: hidden
    }
    .upload-file-wrap div{
        width:120px;
        transform:scale(0.6);
        margin-left: -20px;
        margin-top: -18px
    }
</style>